<style scoped>
.window{display: flex;flex-direction: column;height: 100vh;width: 100%;max-width: 375px;margin: auto !important;position: relative;overflow: hidden;}
.window>main{flex-grow: 1;flex-shrink: 1;overflow: hidden auto;position: relative;}
.window>header{position: sticky;top: 0;z-index: 99;box-sizing: content-box;background: var(--color-bg-0);}
.window>header>.safe-area{position: relative;z-index: 99999;background: #fff;height: var(--safe-area-top);}
.window>footer{position: sticky;bottom: 0;z-index: 9;box-sizing: content-box;background: var(--color-bg-0);}
.window>footer>.safe-area{position: relative;z-index: 99999;background: #fff;height: var(--safe-area-bottom);}
</style>
<template>
  <div class="window">
    <header>
      <div class="safe-area"></div>
      <div id="header_slot"></div>
    </header>
    <main>
      <router-view :key="$route.fullPath"></router-view>
    </main>
    <footer>
      <div id="footer_slot"></div>

      <van-toast safe-area-inset-top safe-area-inset-bottom></van-toast>
      <van-dialog safe-area-inset-top safe-area-inset-bottom></van-dialog>

      <offline_pay ref="offline_pay"></offline_pay>
      <select_option ref="select_option"></select_option>
      <select_date ref="select_date"></select_date>
      <select_sku ref="select_sku"></select_sku>
      <select_additional ref="select_additional"></select_additional>
      <select_pay_type ref="select_pay_type"></select_pay_type>


      <tabs_menu ref="tabs_menu"></tabs_menu>

      <stopwatch ref="stopwatch"></stopwatch>

      <preview_img ref="preview_img"></preview_img>

      <div class="safe-area"></div>
    </footer>
  </div>


</template>

<script>
import tabs_menu from "@/components/tool/tabs_menu.vue";
import offline_pay from "@/components/tool/offline_pay.vue";
import select_additional from "@/components/tool/select_additional.vue";
import select_date from "@/components/tool/select_date.vue";
import select_option from "@/components/tool/select_option.vue";
import select_sku from "@/components/tool/select_sku.vue";
import select_pay_type from "@/components/tool/select_pay_type.vue";
import stopwatch from "@/components/tool/stopwatch.vue";
import preview_img from "@/components/tool/preview_img.vue";

export default {

  components: {
    tabs_menu, offline_pay, select_additional, select_date, select_option, select_sku, select_pay_type, stopwatch, preview_img
  },
  data(){
    return {
    }
  },
  methods: {
  },
  mounted() {

  }
}
</script>
